<h1>SnackBar demo</h1>
<div>
  <div>
    Message: <mat-form-field><input matInput type="text" [(ngModel)]="message"></mat-form-field>
  </div>
  <div>
    <div>Position in page: </div>
    <mat-form-field>
      <mat-select [(ngModel)]="horizontalPosition">
        <mat-option value="start">Start</mat-option>
        <mat-option value="end">End</mat-option>
        <mat-option value="left">Left</mat-option>
        <mat-option value="right">Right</mat-option>
        <mat-option value="center">Center</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field>
      <mat-select [(ngModel)]="verticalPosition">
        <mat-option value="top">Top</mat-option>
        <mat-option value="bottom">Bottom</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div>
    <mat-checkbox [(ngModel)]="action">
      <p *ngIf="!action">Show button on snack bar</p>
      <mat-form-field *ngIf="action">
        <mat-label>Snack bar action label</mat-label>
        <input matInput
               type="text"
               [(ngModel)]="actionButtonLabel">
      </mat-form-field>
    </mat-checkbox>
  </div>
  <div>
    <mat-checkbox [(ngModel)]="setAutoHide">
      <p *ngIf="!setAutoHide">Auto hide after duration</p>
      <mat-form-field *ngIf="setAutoHide">
        <mat-label>Auto hide duration in ms</mat-label>
        <input matInput
               type="number"
               [(ngModel)]="autoHide">
      </mat-form-field>
    </mat-checkbox>
  </div>
  <p>
    <mat-checkbox [(ngModel)]="addExtraClass">Add extra class to container</mat-checkbox>
  </p>
</div>

<p>
  <button mat-raised-button (click)="open()">OPEN</button>
</p>

<button mat-raised-button (click)="openTemplate()">OPEN TEMPLATE</button>

<ng-template #template>
  Template snack bar: {{message}}
</ng-template>
